<template>
  <div>


      <a-card style="width: 100%" class="full-window">
        <search-wrap
            :gridCol="{ span: 6 }"
            :formConfig="formConfig"
            @search="search"
        >
          <template v-slot:name="{ data }">
            <a-input v-model="data.name"></a-input>
          </template>
          <template v-slot:type="{ data }">
            <a-input v-model="data.type"></a-input>
            
          </template>
            <template v-slot:status="{ data }">
              <a-select v-model="data.status">
                <a-select-option value="" >全部</a-select-option>
                <a-select-option :value="0" >正常</a-select-option>
                <a-select-option :value="-1" >停用</a-select-option>
             </a-select>
            </template>
        </search-wrap>
        <basic-table>
           <div style="margin-bottom: 10px">
              <div style="margin-bottom:10px;">
                <a-button type="primary" @click="addHandler">
                  新增
                </a-button>
              </div>
              <template v-if="hasSelected">
                <a-alert type="info" show-icon>
                  <template slot="message">
                    已选择 <span class="ant-btn-link">
                    {{ selectedRowKeys.length }}
                  </span> 项
                    <span style="margin-left:10px;color:#ff4d4f;cursor: pointer;" class="ant-btn-link"
                          @click="delSelectData">
                    删除选中
                  </span>
                  </template>
                </a-alert>
                <!-- {{ `Selected ${selectedRowKeys.length} items` }} -->
              </template>

            </div>
            <a-table :columns="columns" :data-source="data"
                     :pagination="paging"
                     :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                     bordered
                     :loading="loading"
                     @change="tableChange">
              <template slot="status" slot-scope="text,record">
                  <a-tag :color="record.enable?'red':'blue'">
                  {{record.enable?'停用':'正常'}}
                </a-tag>
              </template>
              <template slot="opt" slot-scope="text,record">
                <a-space>
                  <span class="table-opt ant-btn-link" @click="editHandler(record)"><a-icon type="edit" /> 编辑</span>
                  <!-- @click="detailHandler(record)" -->
                  <span class="table-opt ant-btn-link" @click="openDictData(record)"><a-icon type="setting" /> 字典配置</span>
                  <span class="table-opt table-opt-danger" @click="delHandler(record.id)"><a-icon type="delete" /> 删除</span>
                </a-space>
              </template>
            </a-table>
        </basic-table>
      </a-card>
      <a-drawer
          :title="title"
          placement="right"
          :closable="true"
          :maskClosable="false"
          :destroyOnClose="true"
          :visible="visible"
          @close="onClose"
          width="800"
      >
        <Edit  v-if="type === OPT_EDIT" :id="id" @load-data="loadData" @close="onClose"/>
        <DictData v-if="type === 'DICT_DATA'" :dictType="id" />
        <Add v-if="type === OPT_ADD" @load-data="loadData" @close="onClose"/>
      </a-drawer>
          
  </div>
</template>
<script>
import {OPT_ADD,OPT_EDIT,OPT_DETAIL} from '@/utils/const/enum.js'
import {getAction} from "@/utils/plugins/request";
import {handleTree} from "@/utils/func/array_to_tree";
import ListMixin from '@/mixins/basic/list'
import {departmentTypeArr} from "@/utils/const/enum";
import SearchWrap from '@/components/searchWrap'
import moment from 'moment';
import Add from './add.vue'
import DictData from '@/views/system/dictData/index.vue'
import Edit from './edit.vue'
const treeData = [
  {
    name: '全部', id: '', children: []
  },

];
const columns = [{
    dataIndex: 'name',
    key: 'name',
    title: '名称',
        align:'center'
  }, {
    dataIndex: 'type',
    key: 'type',
    title: '标识',
        align:'center'
  }, {
    dataIndex: 'remark',
    key: 'remark',
    title: '备注',
        align:'center'
  },{
    dataIndex: 'status',
    key: 'status',
    width: 50,
    title: '状态',
    scopedSlots: {customRender: "status"},
        align:'center'
  },
  {
    title: "操作",
    key: "opt",
    dataIndex: "opt",
    width: 220,
    scopedSlots: {customRender: "opt"},
  },
];

export default {
  name:"department",
  mixins: [ListMixin],
  data() {
    return {
      OPT_ADD,
      OPT_EDIT,
      OPT_DETAIL,
      moment,
      listUrl: "/system/dict/type/selectPageList",
      delUrl:'/system/dict/type/deleteOne',
      params: {
        parentId: ''
      },
      id:"",
      departmentTypeArr,
      key: 0,
      defaultExpandAll: false,
      columns,
      formConfig: [
        {
          label: "名称",
          name: "name"
        },
        {
          label: "字典类型",
          name: "type",
          searchKey: 'type'
        },
        {
          label: "状态",
          name: "status",
          searchKey: 'status'
        }
      ],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      defaultSelectKeys: [''],
      treeData,
    };
  },
  methods: {
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.isLeaf) {
          resolve();
          return;
        }
        const params = {}
        if (treeNode.dataRef.id) {
          params.id = treeNode.dataRef.id
        }
        getAction('/mbap-pp/rest/system/department/lazy_tree', params).then(res => {
          treeNode.dataRef.children = res.data.map(item => {
            item.isLeaf = item.isParent !== 'true'
            item.children = []
            return item
          })
          this.treeData = [...this.treeData]
          resolve();
        })
      })
    },
    onSearch(searchStr) {
      if (!searchStr) {
        this.defaultExpandAll = false;
        this.key++;
        this.treeData = treeData
        return;
      }
      getAction('/mbap-pp/rest/system/department/search_tree', {serachStr: searchStr}).then(res => {
        const data = res.data.map(item => {
          item.isLeaf = item.isparent !== 'true'
          return item
        })
        this.treeData = handleTree(data)
        console.log(this.$refs.tree)
        this.defaultExpandAll = true;
        this.key++;
      })
    },
    openDictData(item){
      this.id = item.type;
      this.title = "字典数据";
      this.visible = true;
      this.type = "DICT_DATA"
    }
  },
  components:{
    SearchWrap,
    Add,
    DictData,
    Edit
  }
};
</script>